<template>
  <div class="processes-card-warp">
    <a-row>
      <div v-for="(item, index) in forms" :key="index">
        <!-- input -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
          :xxl="6"
          v-if="item.elementType == '1' && item.key != 'orgName'"
        >
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <a-input
              :disabled="item.disabled == 1 ? true : false"
              :placeholder="'请输入' + item.elementName"
              v-model="item.defalutValue"
            ></a-input>
          </a-form-model-item>
        </a-col>

        <!-- select -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
          :xxl="6"
          v-if="item.elementType == 'select' && item.key != 'rangeValue'"
        >
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <a-select
              style="width: 100%"
              v-model="item.defalutValue"
              :disabled="item.disabled == 1 ? true : false"
              :placeholder="'请选择' + item.elementName"
              :loading="item.loading"
              @change="$emit('handleSelect', { ...item, index })"
            >
              <a-select-option
                :value="seItem.dicValue"
                v-for="(seItem, seIdx) in item.selectDatas || []"
                :key="seIdx"
              >
                {{ seItem.dicDesc }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- 单选 -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
          :xxl="6"
          v-if="item.elementType == 'radio'"
        >
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <a-radio-group
              v-model="item.defalutValue"
              :disabled="item.disabled == 1 ? true : false"
            >
              <a-radio value="0"> 合格 </a-radio>
              <a-radio value="1"> 不合格 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <!-- 自检人 -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
          :xxl="6"
          v-if="item.elementType == 'zjr'"
        >
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <a-select
              style="width: 100%"
              v-model="item.defalutValue"
              :disabled="item.disabled == 1 ? true : false"
              :placeholder="'请选择' + item.elementName"
              :loading="item.loading"
            >
              <a-select-option
                :value="seItem.dicValue"
                v-for="(seItem, seIdx) in item.selectDatas || []"
                :key="seIdx"
              >
                {{ seItem.dicDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 施工部位 -->
        <!-- <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          :xxl="12"
          v-if="item.elementType == 'sgbw'"
        >
          <a-form-model-item
            class="construction-site-item"
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validatePosition,
            }"
          >
            <div class="construction-site-container">
              <a-select
                v-model="item.positionKey1"
                :class="positionErrorKey == 'positionKey1' && 'position-error'"
                :disabled="item.disabled == 1 ? true : false"
                placeholder="请选择"
              >
                <a-select-option
                  :value="seItem.dicValue"
                  v-for="(seItem, seIdx) in item.selectDatas || []"
                  :key="seIdx"
                >
                  {{ seItem.dicDesc }}</a-select-option
                >
              </a-select>

              <a-input
                type="number"
                :class="positionErrorKey == 'positionKey2' && 'position-error'"
                placeholder="请输入"
                v-model="item.positionKey2"
                :disabled="item.disabled == 1 ? true : false"
              ></a-input>
              <div class="plus">+</div>
              <a-input
                type="number"
                :class="positionErrorKey == 'positionKey3' && 'position-error'"
                placeholder="请输入"
                v-model="item.positionKey3"
                :disabled="item.disabled == 1 ? true : false"
              ></a-input>
              <div class="split">~</div>
              <a-select
                placeholder="请选择"
                v-model="item.positionKey4"
                :class="positionErrorKey == 'positionKey4' && 'position-error'"
                :disabled="item.disabled == 1 ? true : false"
              >
                <a-select-option
                  :value="seItem.dicValue"
                  v-for="(seItem, seIdx) in item.selectDatas || []"
                  :key="seIdx"
                >
                  {{ seItem.dicDesc }}</a-select-option
                >
              </a-select>

              <a-input
                type="number"
                placeholder="请输入"
                v-model="item.positionKey5"
                :class="positionErrorKey == 'positionKey5' && 'position-error'"
                :disabled="item.disabled == 1 ? true : false"
              ></a-input>
              <div class="plus">+</div>
              <a-input
                :class="positionErrorKey == 'positionKey6' && 'position-error'"
                type="number"
                placeholder="请输入"
                v-model="item.positionKey6"
                :disabled="item.disabled == 1 ? true : false"
              ></a-input>
            </div>
          </a-form-model-item>
        </a-col> -->

        <!-- textarea -->
        <a-col :span="24" v-if="item.elementType == '2'">
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <a-input
              :disabled="item.disabled == 1 ? true : false"
              :placeholder="'请输入' + item.elementName"
              v-model="item.defalutValue"
              type="textarea"
              style="height: 100px"
            ></a-input>
          </a-form-model-item>
        </a-col>

        <!-- 附件 -->
        <a-col :span="24" v-if="item.elementType == '3'">
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <bjUploadFile
              :count="6"
              v-model="item.defalutValue"
              :viewMode="item.disabled == 1 ? true : false"
              :replaceFields="{
                fileName: 'realFileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
                videoSrc: 'imagePath',
              }"
              @download="$emit('fileDownload', $event)"
              @preview="$emit('filePreview', $event)"
              @change="
                $emit('fileChange', {
                  ...$event,
                  eventType: 'file',
                  defalutValue: item.defalutValue,
                })
              "
            ></bjUploadFile>
          </a-form-model-item>
        </a-col>

        <!-- 图片 -->
        <a-col :span="24" v-if="item.elementType == '4'">
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <bjUploadImg
              :count="6"
              :viewMode="item.disabled == 1 ? true : false"
              v-model="item.defalutValue"
              replaceField="imagePath"
              @change="
                $emit('fileChange', {
                  ...$event,
                  eventType: 'img',
                  defalutValue: item.defalutValue,
                })
              "
            ></bjUploadImg>
          </a-form-model-item>
        </a-col>

        <!-- 视频 -->
        <a-col :span="24" v-if="item.elementType == '5'">
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validateForm,
            }"
          >
            <bjUploadFile
              :viewMode="item.disabled == 1 ? true : false"
              :replaceFields="{
                fileName: 'realFileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
                videoSrc: 'imagePath',
              }"
              @change="
                $emit('fileChange', {
                  ...$event,
                  eventType: 'video',
                  defalutValue: item.defalutValue,
                })
              "
              :count="6"
              type="video"
              v-model="item.defalutValue"
            ></bjUploadFile>
          </a-form-model-item>
        </a-col>

        <!-- 地图 -->
        <a-col :span="24" v-if="item.elementType == '6'">
          <a-form-model-item
            :label="item.elementName"
            :prop="item.key"
            :rules="{
              required: item.elementRequired == '0' && item.disabled != 1,
              validator: validatePoint,
            }"
          >
            <chooseLocation
              v-model="item.defalutValue"
              :mode="item.disabled == 1 ? 'view' : 'operate'"
            ></chooseLocation>
          </a-form-model-item>
        </a-col>
      </div>
    </a-row>
  </div>
</template>
<script>
import bjUploadImg from "@/components/bj-upload-img";
import bjUploadFile from "@/components/bj-upload-file";
import chooseLocation from "@/components/choose-location";
import _ from "lodash";
export default {
  props: {
    //操作模式 [ editor编辑  add新增  view详情 ]
    operateMode: {
      type: String,
      default: "editor",
    },

    //表单元素数据集合
    forms: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    bjUploadImg,
    bjUploadFile,
    chooseLocation,
  },
  data() {
    return {
      positionErrorKey: "",
    };
  },
  mounted() {},

  methods: {
    //自定义表单校验
    validateForm(rule, value, callback) {
      try {
        let propField = rule.field;
        let item = this.forms.find((v) => v.key == propField);
        let {
          defalutValue,
          elementName,
          elementType,
          elementRequired,
          disabled,
        } = item;
        let tip = "请输入";
        switch (elementType) {
          case "1" || "2":
            tip = "请输入";
            break;

          case "select" || "3" || "4" || "5":
            tip = "请选择";
            break;

          default:
            break;
        }
        if (!propField || !item) {
          throw "";
        } else {
          if (!defalutValue) {
            if (disabled == 1 || elementRequired != "0") {
              throw "";
            }
            callback(new Error(`${tip + elementName}`));
          } else {
            //文件
            if (["3", "4", "5"].includes(elementType)) {
              if (
                (!defalutValue || defalutValue.length == 0) &&
                elementRequired == "0"
              ) {
                callback(new Error(`${tip + elementName}`));
              } else {
                throw "";
              }
            } else {
              throw "";
            }
          }
        }
      } catch (error) {
        callback();
      }
    },

    //自定义校验坐标
    validatePoint(rule, value, callback) {
      let propField = rule.field;
      let item = this.forms.find((v) => v.key == propField);
      let { defalutValue, elementName, disabled, elementRequired } = item;
      if (disabled == 1 || elementRequired != "0") {
        callback();
      } else {
        if (!defalutValue) {
          callback(new Error(`请选择${elementName}`));
        } else {
          let [lng, lat] = value.split(",");
          if (this.isAMapPoint(lng, lat)) {
            callback();
          } else {
            callback(new Error(`请选择正确的地理坐标`));
          }
        }
      }
    },

    //自定义施工部位检验规则 sgbw
    validatePosition(rule, value, callback) {
      let { forms } = this;
      let val = [];
      try {
        let item = forms.find((v) => v.elementType == "sgbw");
        let keys = [
          "positionKey1",
          "positionKey2",
          "positionKey3",
          "positionKey4",
          "positionKey5",
          "positionKey6",
        ];
        Object.keys(item).forEach((key) => {
          if (keys.includes(key) && !item[key]) {
            throw key;
          } else {
            this.positionErrorKey = "";
          }
        });
        this.forms.forEach((v) => {
          if (v.elementType == "sgbw") {
            this.$set(v, "defalutValue", val.filter((v) => v).toString());
          }
        });
        callback();
      } catch (error) {
        this.positionErrorKey = error;
        callback(new Error(`请完善施工部位`));
      }
    },

    //验证坐标是否合法
    isAMapPoint(lng, lat) {
      const lngRegExp = /^-?(0|[1-9]\d*)(\.\d+)?$/;
      const latRegExp = /^-?([0-8]?\d(\.\d+)?|90(\.0+)?)$/;
      return lngRegExp.test(lng.toString()) && latRegExp.test(lat.toString());
    },
  },

  destroyed() {
    // this.resetForm();
  },
};
</script>
<style lang="less" scoped>
.processes-card-warp {
  border: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 40px 10px 10px;
  /deep/.ant-row {
    &.ant-form-item {
      .flex();
      &.construction-site-item {
        .flex();
        align-items: center;
        margin-bottom: 10px;
        .ant-form-item-label {
          margin-top: -20px;
        }
        .has-error {
          input {
            border-color: #d4d4d4;
            &:hover {
              border-color: #5775ad;
            }
            &:focus {
              border-color: #5775ad;
              box-shadow: 0 0 0 2px rgba(55, 89, 160, 0.2);
            }
          }
          .ant-select:not(.position-error) {
            &.ant-select-focuesd,
            &.ant-select-open {
              .ant-select-selection {
                border-color: #5775ad;
                box-shadow: 0 0 0 2px rgba(55, 89, 160, 0.2) !important;
              }
            }
            .ant-select-arrow {
              color: rgba(0, 0, 0, 0.25);
            }
            .ant-select-selection {
              border-color: #d4d4d4;

              &:hover {
                border-color: #5775ad;
              }
              &:focus {
                border-color: #5775ad;
                box-shadow: 0 0 0 2px rgba(55, 89, 160, 0.2);
              }
            }
          }
        }
        .construction-site-container {
          box-sizing: border-box;
          padding-bottom: 4px;
          .flex();
          .ant-input {
            display: inline-block;
            &:nth-of-type(1),
            &:nth-of-type(3) {
              margin-left: 10px;
            }
            &.position-error {
              border-color: #f5222d;
              box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
            }
          }
          .plus,
          .split {
            height: 100%;
            height: 36px;
            .flex();
            align-items: center;
            padding: 0 8px;
          }
          .split {
            padding: 0 10px;
          }
        }
      }

      .ant-form-item-label {
        width: 130px;
        flex-shrink: 0;
      }

      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  /deep/.bj-upload-img {
    margin-top: 10px;
  }
  /deep/.ant-radio-disabled .ant-radio-inner::after {
    background-color: var(--primary-color);
  }
  /deep/.ant-radio-disabled + span {
    color: #000000;
  }
}
</style>
